<template>
  <div class="custom-page-content">
    <div class="page-header">
      <h1 v-if="frontmatter?.title" class="page-title">{{ frontmatter.title }}</h1>
      <PageViewCount />
    </div>
    <slot />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useData } from 'vitepress'
import PageViewCount from './PageViewCount.vue'

const { frontmatter } = useData()
</script>

<style scoped>
.custom-page-content {
  width: 100%;
}

.page-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--vp-c-divider);
}

.page-title {
  margin: 0 0 8px 0;
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--vp-c-text-1);
}

/* 暗色主题适配 */
.dark .page-title {
  color: var(--vp-c-text-1);
}
</style> 